<template>
  <main class="resume-page">
    <div class="resume-container">
      <!-- 左侧目录 -->
      <aside class="resume-sidebar">
        <div class="sidebar-header">
          <h2>简历管理</h2>
        </div>
        <div class="sidebar-menu">
          <div
            v-for="(item, index) in menuItems"
            :key="index"
            class="menu-item"
            :class="{ active: activeMenuIndex === index }"
            @click="activeMenuIndex = index"
          >
            <div class="menu-item-content">
              <span class="menu-item-name">{{ item.name }}</span>
              <el-button
                v-if="activeMenuIndex === index"
                type="text"
                size="small"
                class="edit-btn"
                @click.stop="handleEdit(item, index)"
              >
                编辑
              </el-button>
            </div>
          </div>
        </div>
      </aside>

      <!-- 右侧简历内容区域 -->
      <section class="resume-content">
        <!-- 操作按钮区域 -->
        <div class="resume-actions">
          <el-button type="primary" size="large" @click="handleUploadResume">
            <i style="margin-right: 8px;">📤</i>
            上传简历
          </el-button>
          <el-button type="success" size="large" @click="handleExportResume">
            <i style="margin-right: 8px;">📥</i>
            导出简历
          </el-button>
        </div>
        
        <div class="resume-paper" @mouseenter="showTooltip = true" @mouseleave="showTooltip = false">
          <!-- 简历头部 -->
          <div class="resume-header">
            <div class="header-info">
              <h1 class="name">{{ resumeData.name }}</h1>
              <div class="contact-info">
                <span>电话：{{ resumeData.phone }}</span>
                <span>邮箱：{{ resumeData.email }}</span>
                <span>地址：{{ resumeData.address }}</span>
              </div>
            </div>
            <div class="header-avatar">
              <img :src="resumeData.avatar" alt="头像" />
            </div>
          </div>

          <!-- 个人简介 -->
          <div class="resume-section">
            <h2 class="section-title">个人简介</h2>
            <div class="section-content">{{ resumeData.summary }}</div>
          </div>

          <!-- 工作经历 -->
          <div class="resume-section">
            <h2 class="section-title">工作经历</h2>
            <div
              v-for="(exp, index) in resumeData.experiences"
              :key="index"
              class="experience-item"
            >
              <div class="exp-header">
                <span class="exp-company">{{ exp.company }}</span>
                <span class="exp-period">{{ exp.period }}</span>
              </div>
              <div class="exp-position">{{ exp.position }}</div>
              <div class="exp-description">{{ exp.description }}</div>
            </div>
          </div>

          <!-- 教育经历 -->
          <div class="resume-section">
            <h2 class="section-title">教育经历</h2>
            <div
              v-for="(edu, index) in resumeData.education"
              :key="index"
              class="education-item"
            >
              <div class="edu-header">
                <span class="edu-school">{{ edu.school }}</span>
                <span class="edu-period">{{ edu.period }}</span>
              </div>
              <div class="edu-degree">{{ edu.degree }} | {{ edu.major }}</div>
            </div>
          </div>

          <!-- 技能特长 -->
          <div class="resume-section">
            <h2 class="section-title">技能特长</h2>
            <div class="skills-list">
              <span
                v-for="(skill, index) in resumeData.skills"
                :key="index"
                class="skill-tag"
              >
                {{ skill }}
              </span>
            </div>
          </div>

          <!-- 鼠标悬停提示框 -->
          <div v-if="showTooltip" class="resume-tooltip">
            <div class="tooltip-content">
              <p>这是简历预览区域</p>
              <p>点击左侧菜单项进行编辑</p>
            </div>
          </div>
        </div>
      </section>
    </div>

    <!-- 编辑对话框 -->
    <el-dialog
      v-model="editDialogVisible"
      :title="`编辑 ${currentEditItem?.name || ''}`"
      width="600px"
      @close="handleDialogClose"
    >
      <el-form :model="editForm" label-width="100px">
        <el-form-item label="名称">
          <el-input v-model="editForm.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item
          v-if="currentEditItem?.type === 'summary'"
          label="内容"
        >
          <el-input
            v-model="editForm.content"
            type="textarea"
            :rows="4"
            placeholder="请输入个人简介"
          />
        </el-form-item>
        <el-form-item
          v-if="currentEditItem?.type === 'experience'"
          label="公司名称"
        >
          <el-input v-model="editForm.company" placeholder="请输入公司名称" />
        </el-form-item>
        <el-form-item
          v-if="currentEditItem?.type === 'experience'"
          label="职位"
        >
          <el-input v-model="editForm.position" placeholder="请输入职位" />
        </el-form-item>
        <el-form-item
          v-if="currentEditItem?.type === 'experience'"
          label="时间段"
        >
          <el-input v-model="editForm.period" placeholder="例如：2020.01-2023.12" />
        </el-form-item>
        <el-form-item
          v-if="currentEditItem?.type === 'experience'"
          label="工作描述"
        >
          <el-input
            v-model="editForm.description"
            type="textarea"
            :rows="4"
            placeholder="请输入工作描述"
          />
        </el-form-item>
        <el-form-item
          v-if="currentEditItem?.type === 'education'"
          label="学校"
        >
          <el-input v-model="editForm.school" placeholder="请输入学校名称" />
        </el-form-item>
        <el-form-item
          v-if="currentEditItem?.type === 'education'"
          label="学历"
        >
          <el-input v-model="editForm.degree" placeholder="例如：本科" />
        </el-form-item>
        <el-form-item
          v-if="currentEditItem?.type === 'education'"
          label="专业"
        >
          <el-input v-model="editForm.major" placeholder="请输入专业" />
        </el-form-item>
        <el-form-item
          v-if="currentEditItem?.type === 'education'"
          label="时间段"
        >
          <el-input v-model="editForm.period" placeholder="例如：2016.09-2020.06" />
        </el-form-item>
        <el-form-item
          v-if="currentEditItem?.type === 'skill'"
          label="技能"
        >
          <el-input v-model="editForm.skill" placeholder="请输入技能名称" />
        </el-form-item>
        <el-form-item
          v-if="currentEditItem?.type === 'basic'"
          label="姓名"
        >
          <el-input v-model="editForm.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item
          v-if="currentEditItem?.type === 'basic'"
          label="电话"
        >
          <el-input v-model="editForm.phone" placeholder="请输入电话" />
        </el-form-item>
        <el-form-item
          v-if="currentEditItem?.type === 'basic'"
          label="邮箱"
        >
          <el-input v-model="editForm.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item
          v-if="currentEditItem?.type === 'basic'"
          label="地址"
        >
          <el-input v-model="editForm.address" placeholder="请输入地址" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>

    <!-- 上传简历对话框 -->
    <el-dialog
      v-model="uploadDialogVisible"
      title="上传简历"
      width="500px"
    >
      <el-upload
        class="resume-uploader"
        drag
        :auto-upload="false"
        :on-change="handleFileChange"
        :file-list="fileList"
        accept=".pdf,.doc,.docx"
        :limit="1"
      >
        <div style="font-size: 48px; margin-bottom: 16px;">📄</div>
        <div class="el-upload__text">
          将文件拖到此处，或<em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            支持 PDF、Word 格式，文件大小不超过 10MB
          </div>
        </template>
      </el-upload>
      <template #footer>
        <el-button @click="uploadDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirmUpload" :disabled="!selectedFile">
          确定上传
        </el-button>
      </template>
    </el-dialog>
  </main>
</template>

<script>
export default {
  name: 'ResumeView',
  data() {
    return {
      activeMenuIndex: 0,
      showTooltip: false,
      editDialogVisible: false,
      uploadDialogVisible: false,
      currentEditItem: null,
      currentEditIndex: -1,
      editForm: {},
      fileList: [],
      selectedFile: null,
      menuItems: [
        { name: '基本信息', type: 'basic' },
        { name: '个人简介', type: 'summary' },
        { name: '工作经历', type: 'experience' },
        { name: '教育经历', type: 'education' },
        { name: '技能特长', type: 'skill' },
      ],
      resumeData: {
        name: '张三',
        phone: '138****8888',
        email: 'zhangsan@example.com',
        address: '北京市朝阳区',
        avatar: 'https://avatars.githubusercontent.com/u/0?v=4',
        summary: '具有5年以上的前端开发经验，熟练掌握Vue、React等前端框架，具备良好的团队协作能力和问题解决能力。',
        experiences: [
          {
            company: 'XX科技有限公司',
            position: '前端开发工程师',
            period: '2020.01-2023.12',
            description: '负责公司核心产品的前端开发工作，使用Vue.js构建用户界面，优化页面性能，提升用户体验。',
          },
          {
            company: 'YY互联网公司',
            position: '前端开发实习生',
            period: '2019.06-2019.12',
            description: '参与公司内部管理系统的开发，学习并实践前端开发技术。',
          },
        ],
        education: [
          {
            school: 'XX大学',
            degree: '本科',
            major: '计算机科学与技术',
            period: '2016.09-2020.06',
          },
        ],
        skills: ['Vue.js', 'React', 'JavaScript', 'TypeScript', 'Node.js', 'Webpack', 'Git'],
      },
    }
  },
  methods: {
    handleEdit(item, index) {
      this.currentEditItem = item
      this.currentEditIndex = index
      this.editDialogVisible = true
      
      // 根据类型初始化表单数据
      if (item.type === 'basic') {
        this.editForm = {
          name: this.resumeData.name,
          phone: this.resumeData.phone,
          email: this.resumeData.email,
          address: this.resumeData.address,
        }
      } else if (item.type === 'summary') {
        this.editForm = {
          name: item.name,
          content: this.resumeData.summary,
        }
      } else if (item.type === 'experience') {
        // 编辑工作经历，默认编辑第一项
        if (this.resumeData.experiences.length > 0) {
          const exp = this.resumeData.experiences[0]
          this.editForm = {
            name: item.name,
            company: exp.company,
            position: exp.position,
            period: exp.period,
            description: exp.description,
            index: 0,
          }
        } else {
          this.editForm = {
            name: item.name,
            company: '',
            position: '',
            period: '',
            description: '',
            index: -1,
          }
        }
      } else if (item.type === 'education') {
        // 编辑教育经历，默认编辑第一项
        if (this.resumeData.education.length > 0) {
          const edu = this.resumeData.education[0]
          this.editForm = {
            name: item.name,
            school: edu.school,
            degree: edu.degree,
            major: edu.major,
            period: edu.period,
            index: 0,
          }
        } else {
          this.editForm = {
            name: item.name,
            school: '',
            degree: '',
            major: '',
            period: '',
            index: -1,
          }
        }
      } else if (item.type === 'skill') {
        this.editForm = {
          name: item.name,
          skill: this.resumeData.skills.join('、'),
        }
      }
    },
    handleSave() {
      if (this.currentEditItem.type === 'basic') {
        this.resumeData.name = this.editForm.name
        this.resumeData.phone = this.editForm.phone
        this.resumeData.email = this.editForm.email
        this.resumeData.address = this.editForm.address
      } else if (this.currentEditItem.type === 'summary') {
        this.resumeData.summary = this.editForm.content
      } else if (this.currentEditItem.type === 'experience') {
        const expData = {
          company: this.editForm.company,
          position: this.editForm.position,
          period: this.editForm.period,
          description: this.editForm.description,
        }
        if (this.editForm.index >= 0 && this.resumeData.experiences[this.editForm.index]) {
          this.resumeData.experiences[this.editForm.index] = expData
        } else {
          this.resumeData.experiences.push(expData)
        }
      } else if (this.currentEditItem.type === 'education') {
        const eduData = {
          school: this.editForm.school,
          degree: this.editForm.degree,
          major: this.editForm.major,
          period: this.editForm.period,
        }
        if (this.editForm.index >= 0 && this.resumeData.education[this.editForm.index]) {
          this.resumeData.education[this.editForm.index] = eduData
        } else {
          this.resumeData.education.push(eduData)
        }
      } else if (this.currentEditItem.type === 'skill') {
        this.resumeData.skills = this.editForm.skill.split(/[、，,]/).filter(s => s.trim())
      }
      
      this.editDialogVisible = false
      this.$message.success('保存成功')
    },
    handleDialogClose() {
      this.editForm = {}
      this.currentEditItem = null
      this.currentEditIndex = -1
    },
    handleUploadResume() {
      // 跳转到创建简历页面
      this.$router.push('/resume/create')
    },
    handleFileChange(file, fileList) {
      this.selectedFile = file.raw
      this.fileList = fileList
    },
    handleConfirmUpload() {
      if (!this.selectedFile) {
        this.$message.warning('请选择要上传的文件')
        return
      }
      
      // 检查文件大小（10MB）
      const maxSize = 10 * 1024 * 1024
      if (this.selectedFile.size > maxSize) {
        this.$message.error('文件大小不能超过 10MB')
        return
      }
      
      // 检查文件类型
      const allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document']
      if (!allowedTypes.includes(this.selectedFile.type)) {
        this.$message.error('只支持 PDF、Word 格式')
        return
      }
      
      // 这里可以调用上传接口
      // 模拟上传过程
      const loading = this.$loading({
        lock: true,
        text: '正在上传简历...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      
      setTimeout(() => {
        loading.close()
        this.$message.success('简历上传成功！')
        this.uploadDialogVisible = false
        this.fileList = []
        this.selectedFile = null
      }, 1500)
    },
    handleExportResume() {
      // 导出简历为PDF或Word
      this.$message.info('正在生成简历文件...')
      
      // 创建简历内容的HTML
      const resumeHtml = this.generateResumeHtml()
      
      // 创建新窗口打印（可以进一步优化为实际导出PDF）
      const printWindow = window.open('', '_blank')
      printWindow.document.write(`
        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="UTF-8">
          <title>${this.resumeData.name}的简历</title>
          <style>
            body {
              font-family: "Microsoft YaHei", Arial, sans-serif;
              padding: 40px;
              line-height: 1.6;
              color: #333;
            }
            .header {
              display: flex;
              justify-content: space-between;
              border-bottom: 2px solid #00c293;
              padding-bottom: 20px;
              margin-bottom: 30px;
            }
            .name {
              font-size: 32px;
              font-weight: bold;
              margin-bottom: 10px;
            }
            .contact {
              color: #666;
              font-size: 14px;
            }
            .avatar {
              width: 120px;
              height: 120px;
              border-radius: 8px;
            }
            .section {
              margin-bottom: 30px;
            }
            .section-title {
              font-size: 20px;
              font-weight: 600;
              border-bottom: 1px solid #e5e5e5;
              padding-bottom: 8px;
              margin-bottom: 16px;
            }
            .experience-item, .education-item {
              margin-bottom: 20px;
              padding-bottom: 20px;
              border-bottom: 1px dashed #e5e5e5;
            }
            .skills-list {
              display: flex;
              flex-wrap: wrap;
              gap: 12px;
            }
            .skill-tag {
              padding: 6px 16px;
              background: #f0fffb;
              color: #00c293;
              border-radius: 20px;
              border: 1px solid #00c293;
            }
            @media print {
              body { padding: 20px; }
            }
          </style>
        </head>
        <body>
          ${resumeHtml}
        </body>
        </html>
      `)
      printWindow.document.close()
      
      // 延迟打印，确保内容加载完成
      setTimeout(() => {
        printWindow.print()
        this.$message.success('简历已准备打印，您也可以另存为PDF')
      }, 500)
    },
    generateResumeHtml() {
      let html = `
        <div class="header">
          <div>
            <div class="name">${this.resumeData.name}</div>
            <div class="contact">
              电话：${this.resumeData.phone} | 
              邮箱：${this.resumeData.email} | 
              地址：${this.resumeData.address}
            </div>
          </div>
          <img src="${this.resumeData.avatar}" class="avatar" alt="头像" />
        </div>
        
        <div class="section">
          <div class="section-title">个人简介</div>
          <div>${this.resumeData.summary}</div>
        </div>
        
        <div class="section">
          <div class="section-title">工作经历</div>
      `
      
      this.resumeData.experiences.forEach(exp => {
        html += `
          <div class="experience-item">
            <div><strong>${exp.company}</strong> <span style="float: right; color: #999;">${exp.period}</span></div>
            <div style="color: #00c293; margin: 8px 0;">${exp.position}</div>
            <div>${exp.description}</div>
          </div>
        `
      })
      
      html += `</div><div class="section"><div class="section-title">教育经历</div>`
      
      this.resumeData.education.forEach(edu => {
        html += `
          <div class="education-item">
            <div><strong>${edu.school}</strong> <span style="float: right; color: #999;">${edu.period}</span></div>
            <div>${edu.degree} | ${edu.major}</div>
          </div>
        `
      })
      
      html += `</div><div class="section"><div class="section-title">技能特长</div><div class="skills-list">`
      
      this.resumeData.skills.forEach(skill => {
        html += `<span class="skill-tag">${skill}</span>`
      })
      
      html += `</div></div>`
      
      return html
    },
  },
}
</script>

<style scoped>
.resume-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 24px;
}

.resume-container {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  gap: 24px;
  min-height: calc(100vh - 48px);
}

/* 左侧目录 */
.resume-sidebar {
  width: 280px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.sidebar-header {
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  background: linear-gradient(90deg, #0b0b0c 0%, #00c293 100%);
}

.sidebar-header h2 {
  margin: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
}

.sidebar-menu {
  padding: 8px 0;
}

.menu-item {
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s;
  border-left: 3px solid transparent;
}

.menu-item:hover {
  background: #f0fffb;
}

.menu-item.active {
  background: #f0fffb;
  border-left-color: #00c293;
}

.menu-item-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-item-name {
  font-size: 15px;
  color: #333;
  font-weight: 500;
}

.edit-btn {
  color: #00c293;
  font-size: 13px;
  padding: 0;
}

/* 右侧简历内容 */
.resume-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0;
}

/* 操作按钮区域 */
.resume-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 20px;
}

.resume-paper {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: #fff;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  position: relative;
  min-height: 600px;
}

/* 鼠标悬停提示框 */
.resume-tooltip {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 13px;
  z-index: 10;
  animation: fadeIn 0.3s;
}

.resume-tooltip::after {
  content: '';
  position: absolute;
  top: -6px;
  right: 30px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(0, 0, 0, 0.8);
}

.tooltip-content p {
  margin: 4px 0;
  line-height: 1.5;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 简历头部 */
.resume-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 24px;
  border-bottom: 2px solid #00c293;
  margin-bottom: 24px;
}

.header-info {
  flex: 1;
}

.name {
  font-size: 32px;
  font-weight: 700;
  color: #333;
  margin: 0 0 12px 0;
}

.contact-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  color: #666;
  font-size: 14px;
}

.header-avatar {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid #f0f0f0;
}

.header-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 简历章节 */
.resume-section {
  margin-bottom: 32px;
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e5e5;
}

.section-content {
  color: #666;
  line-height: 1.8;
  font-size: 15px;
}

/* 工作经历 */
.experience-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #e5e5e5;
}

.experience-item:last-child {
  border-bottom: none;
}

.exp-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.exp-company {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.exp-period {
  color: #999;
  font-size: 14px;
}

.exp-position {
  font-size: 16px;
  color: #00c293;
  font-weight: 500;
  margin-bottom: 8px;
}

.exp-description {
  color: #666;
  line-height: 1.8;
  font-size: 14px;
}

/* 教育经历 */
.education-item {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px dashed #e5e5e5;
}

.education-item:last-child {
  border-bottom: none;
}

.edu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.edu-school {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.edu-period {
  color: #999;
  font-size: 14px;
}

.edu-degree {
  color: #666;
  font-size: 15px;
}

/* 技能特长 */
.skills-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.skill-tag {
  padding: 6px 16px;
  background: #f0fffb;
  color: #00c293;
  border-radius: 20px;
  font-size: 14px;
  border: 1px solid #00c293;
}

/* 上传组件样式 */
.resume-uploader {
  width: 100%;
}

.resume-uploader :deep(.el-upload) {
  width: 100%;
}

.resume-uploader :deep(.el-upload-dragger) {
  width: 100%;
  padding: 40px 20px;
}
</style>

